<template>
	<view class="mine-answer">
		<nav-header title="需要正确回答问题">
			<template v-slot:right>
				<text @tap="comfirm">完成</text>
			</template>
		</nav-header>

		<view class="question">
			<uni-forms :modelValue="form" ref="form" :rules="rules">

				<view>
					<text>请输入问题:</text>
					<uni-forms-item name="question">
						<view class="mt">
							<uni-easyinput placeholder="不超过20个字符,一个中文算2个" border="bottom" v-model="form.question"
								maxlength="20" :clearable="false" />
						</view>
					</uni-forms-item>
				</view>

				<view class="answer">
					<text>请输入答案:</text>
					<uni-forms-item name="answer">
						<view class="mt">
							<uni-easyinput placeholder="不超过20个字符,一个中文算2个" border="bottom" v-model="form.answer"
								maxlength="20" :clearable="false" />
						</view>
					</uni-forms-item>
				</view>

			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					question: "",
					answer: ""
				},
				rules: {
					question: {
						rules: [{
							required: true,
							errorMessage: '请输入问题',
						}]
					},
					answer: {
						rules: [{
							required: true,
							errorMessage: '请输入答案',
						}]
					},
				},
				index: null
			}
		},
		methods: {
			selectMethod() {

			},
			comfirm() {
				this.$refs.form.validate().then(res => {
					let data = {
						userId: this.userStore.userInfo.id,
						strategyType: this.index,
						question: this.form.question,
						answer: this.form.answer
					}
					this.$http({
						url: "/friend/updateAddFriendStrategy",
						method: "POST",
						data: data
					}).then((data) => {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						})
						setTimeout(() => {
							// 回退并刷新
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.loadSelectedMethod();
							uni.navigateBack();
						}, 1000);
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			getData(){
				this.$http({
					url:"/friend/findAddFriendStrategy",
					method:"GET"
				}).then((data)=>{
					if(data){
						this.form.question=data.question
						this.form.answer=data.answer
					}
				})
			}
		},
		onLoad(options) {
			this.index = options.index
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.mine-answer {
		.question {
			padding: 30rpx;

			text {
				font-size: 30rpx;
				color: #828282;
			}

			.answer {
				margin-top: 20rpx;
			}
		}
		
		.mt{
			margin-top: 20rpx;
		}
	}
</style>